<template>
    <a-form layout="vertical" ref="filterForm" :model="form">
        <a-form-item label="姓名" name="staffName">
            <a-input @pressEnter="searchStaffName" v-model:value="form.staffName"></a-input>
        </a-form-item>
        <a-form-item label="部门" name="departmentName">
            <a-input @pressEnter="searchDepartment" v-model:value="form.departmentName"></a-input>
        </a-form-item>
    </a-form>
</template>   
  
<script setup lang="ts">
import appStore from '@/store';
import { FormInstance } from 'ant-design-vue';
const { isClearFormRef } = storeToRefs(appStore.useCommonStore);
const filterForm = ref<FormInstance>();
const form = reactive({
    staffName: '',
    departmentName: '',
});
const searchStaffName = async (e) => {
    console.log(e.target.value, 'e');
    const res = await appStore.useAttendanceStore.getAttendanceList();
    console.log(res, 'ressssss')
}
const searchDepartment = async (e) => {
    const res = await appStore.useStaffStore.getStaffList(1, 10, { departmentName: [e.target.value] });
}
const searchLevel = async (e) => {
    const res = await appStore.useStaffStore.getStaffList(1, 10, { levelName: [e.target.value] });
}

watch(isClearFormRef, async () => {
    // 清空表单
    filterForm.value?.resetFields();
    // 重新请求数据
    await appStore.useStaffStore.getStaffList();
});
</script>
  
<style lang="less" scoped>
form {
    margin-top: 30px;
}

input {
    width: 100%;
}
</style>
  